<template>
    <el-container>

        <!--header-->
        <el-header>
            <el-row type="flex" class="row-bg" justify="space-between">
                <el-col>
                    <h1>用户列表</h1>
                    <el-tag v-for="(tag,index) in filterTags" type="info" :key="index">{{tag}}</el-tag>
                </el-col>
                <el-col style="text-align: right;">
                    <el-button type="primary" @click="create">新增</el-button>
                    <el-button @click="filterDialogVisible = true">筛选</el-button>
                    <template v-if="multipleSelection.length">
                        <el-button type="danger" @click="multipleDelete">删除所选({{multipleSelection.length}})</el-button>
                    </template>

                </el-col>
            </el-row>

        </el-header>

        <el-container>
            <el-main>        <!--dialog-->
                <el-dialog title="新建用户" :visible.sync="createUserDialogVisible">
                    <user-form type="create" @complete="createUserComplete"></user-form>
                </el-dialog>
                <el-dialog title="编辑用户" :visible.sync="editUserDialogVisible">
                    <user-form type="edit" :user-id="currentEditUserId" :key="currentEditUserId"
                               @complete="editUserComplete"></user-form>
                </el-dialog>
                <el-dialog title="筛选" :visible.sync="filterDialogVisible">
                    <users-filter @complete="confirmFilter"></users-filter>
                </el-dialog>
                <!--list-->
                <el-table :data="users" stripe v-loading="loading" @selection-change="selectionChange"
                          @sort-change="sortChange" highlight-current-row>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="id" label="#" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="email" label="电子邮箱"></el-table-column>
                    <el-table-column prop="role_title" label="角色" width="80"></el-table-column>
                    <el-table-column prop="updated_at" label="更新时间" width="180" sortable="custom"></el-table-column>
                    <el-table-column prop="created_at" label="注册时间" width="180" sortable="custom"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" size="small">编辑</el-button>

                            <el-button v-if="!scope.row.deleted_at" @click="destroy(scope.row)" type="danger"
                                       size="small">删除
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <!--pagination-->
                <div class="block">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="currentPageChange"
                            background
                            :current-page="pagination.current_page"
                            :page-sizes="[15, 30, 50, 100]"
                            :page-size="pagination.per_page"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>

    </el-container>
</template>

<script>
    import UserForm from '../components/UserForm';
    import UsersFilter from "../components/UsersFilter";


    let sort = {
        data() {
            return {
                sort: {
                    order_by: null,
                    order_direction: null,
                },
            }
        },
        methods: {
            sortChange(val) {
                this.sort = {
                    order_by: val.prop,
                    order_direction: val.order === 'ascending' ? 'asc' : 'desc'
                }
            }
        }
    };


    export default {
        components: {UserForm, UsersFilter},
        mixins: [sort],
        data() {
            return {
                users: [],
                createUserDialogVisible: false,
                editUserDialogVisible: false,
                currentEditUserId: null,
                loading: true,
                pagination: {
                    current_page: null,
                    per_page: null,
                    total: 0,
                },
                filterForm: {},
                filterTags: [],
                filterDialogVisible: false,
                multipleSelection: [],
            }
        },
        watch: {
            sort() {
                this.getUsers();
            }
        },
        methods: {
            getUsersPromise() {
                return axios.get('users', {
                    params: {
                        page: this.pagination.current_page,
                        per_page: this.pagination.per_page,
                        order_by: this.sort.order_by,
                        order_direction: this.sort.order_direction,
                        name: this.filterForm.name,
                        email: this.filterForm.email,
                        roles: this.filterForm.roles,
                        trashed: this.filterForm.trashed,
                        created_at_from: this.filterForm.created_at_from,
                        created_at_to: this.filterForm.created_at_to,
                    }
                });
            },
            getUsers() {
                this.loading = true;
                this.getUsersPromise().then((response) => {
                    this.users = response.data.data;
                    this.pagination = {
                        current_page: parseInt(response.data.meta.current_page),
                        per_page: parseInt(response.data.meta.per_page),
                        total: parseInt(response.data.meta.total),
                    };
                    this.loading = false;
                })
            }, create() {
                this.createUserDialogVisible = true;
            }, createUserComplete() {
                this.createUserDialogVisible = false;
                this.getUsers();
            }, view(row) {
                // this.$router.push({name: 'user-show', params: {user: row.id}})
            }, edit(row) {
                this.currentEditUserId = row.id;
                this.editUserDialogVisible = true;
            }, editUserComplete() {
                this.editUserDialogVisible = false;
                this.getUsers();
            }, destroy(row) {
                this.$alert('此操作将删除该用户【' + row.name + '】, 是否继续?').then(() => {
                    this.deletePromise(row).then(() => {
                        this.$message.success('删除成功!');
                        this.getUsers();
                    });
                });
            }, deletePromise(row) {
                return axios.delete('users/' + row.id);
            }, pageSizeChange(per_page) {
                this.pagination.current_page = 1;
                this.pagination.per_page = per_page;
                this.getUsers();
            }, currentPageChange(current_page) {
                this.pagination.current_page = current_page;
                this.getUsers();
            }, confirmFilter(form, tags) {
                this.filterForm = form;
                this.filterTags = tags;
                this.filterDialogVisible = false;
                this.pagination.current_page = 1;
                this.getUsers();
            }, selectionChange(val) {
                this.multipleSelection = val;
            }, multipleDelete() {
                //TODO 改为异步删除
                let promises = [];
                this.multipleSelection.forEach((item) => {
                    promises.push(this.deletePromise(item));
                });
                axios.all(promises).then(() => {
                    this.getUsers();
                }).catch(() => {
                    this.$message.error('删除未完全成功');
                    this.getUsers();
                });
            }
        },
        mounted() {

            this.getUsers();
        }
    }
</script>

<style scoped>

</style>